<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
    <div class="center clearfix">
        <h1 class="logo">瓷匠</h1>
        <ul class="header_nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">产品中心</a></li>
            <li><a href="#">人才招聘</a></li>
            <li><a href="#">在线联系</a></li>
            <div id="box2">
                <p>登录</p>
            </div>
            <div class="box1">
                <li><a href="#">qq登录</a></li>
                <li>手机号登录</li>
                <li>微博登录</li>
            </div>
        </ul>

    </div>
</div>
<div id="banner">
<ul>
    <li><img src="img/pic.jpg" alt="" class="img_1"></li>
    <li><img src="img/pic1.jpg" alt="" class="img_1"></li>
    <li><img src="img/pic3.jpg" alt="" class="img_1"></li>
</ul>
    <div class="circle">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <span class="prev">&lt;</span>
    <span class="next">&gt;</span>
</div>
<div id="container" >
    <ul class="tour_container clearfix">
        <li><img src="img/tour1.jpg" alt="">
            <div class="desc">
                <p>博物馆博物馆博物馆主要经营牡丹瓷、宋胜利官窑牡丹瓷</p>
            </div>
        </li>
       <li><img src="img/tour2.jpg" alt="">
        <div class="desc">
            <p>博物馆博物馆博物馆主要经营牡丹瓷、宋胜利官窑牡丹瓷</p>
        </div>
        </li>
        <li><img src="img/tour3.jpg" alt="">
        <div class="desc">
            <p>博物馆博物馆博物馆主要经营牡丹瓷、宋胜利官窑牡丹瓷</p>
        </div>
        </li>
        <li><img src="img/tour4.jpg" alt="">
            <div class="desc">
                <p>博物馆博物馆博物馆主要经营牡丹瓷、宋胜利官窑牡丹瓷</p>
            </div>
        </li>
        <li><img src="img/tour3.jpg" alt="">
            <div class="desc">
                <p>博物馆博物馆博物馆主要经营牡丹瓷、宋胜利官窑牡丹瓷</p>
            </div>
        </li>
        <li><img src="img/tour3.jpg" alt="">
            <div class="desc">
                <p>博物馆博物馆博物馆主要经营牡丹瓷、宋胜利官窑牡丹瓷</p>
            </div>
        </li>
    </ul>
    </div>


<div id="footer">
    <div class="bottom">
        Copyright © YCKU 牡丹瓷|牡丹瓷有限gongs
    </div>
</div>

</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        $("#box2").hover(function () {
            $(".box1").show();
        },function () {
            $(".box1").hide();
        })
    })

    $(function () {
        //鼠标移入大盒子让箭头显示，移出消失
        $("#banner").hover(function () {
            $("#banner .prev,#banner .next").fadeIn();
            clearInterval(timer);
        },function () {
            $("#banner .prev,#banner .next").fadeOut();
            timer = setInterval(lunbo,2000);
        });

        function silder(index) {
            //当鼠标移入的时候，给当前移入的元素添加类名
            //把当前移入元素上下同级的所有元素的类名移除
            $(".circle span").eq(index).addClass("active").siblings().removeClass("active");
            //改变图片
            $("#banner ul li").eq(index).fadeIn().siblings().fadeOut();
        }

        //初始化一个全局变量
        var _index = 0;
        var timer = null;
        $(".circle span").mouseover(function () {
            //获取当前移入元素的下标
            _index = $(this).index();
            silder(_index);
        })

        function lunbo() {
            if(_index == 3){
                _index = 0;
            }else{
                _index++;
            }
            silder(_index);
        }
        //开启定时器
        timer = setInterval(lunbo,2000);
        //点击切换到下一张
        $("#banner .next").click(function () {
            if(_index == 3){
                _index = 0;
            }else{
                _index++;
            }
            silder(_index);
        })
        //点击切换到上一张
        $("#banner .prev").click(function () {
            if(_index == 0){
                _index = 3;
            }else{
                _index--;
            }
            silder(_index);
        })
    })
</script>